<template>
  <div class="container">
    <div class="top">
      <div class="name">
        <div>
          <span>{{ pageName }}</span>
        </div>
      </div>
      <div class="button">
        <el-button
          icon="el-icon-plus"
          class="el-button--plain"
          size="mini"
          v-if="pageType !='lastPage'"
          @click="addPage"
        >{{ buttonName }}</el-button>
        <el-button
          class="el-button--plain"
          size="mini"
          icon="el-icon-check"
          v-if="pageType !='addStation'"
          @click="save"
        >保存</el-button>
        <el-button
          class="el-button--plain"
          size="mini"
          icon="el-icon-del"
          v-if="pageType !='addStation'"
          @click="deleteData"
        >删除</el-button>
      </div>
    </div>
    <div class="first">
      <dividerTitle :title="'节点信息'"></dividerTitle>
      <div class="edit-form">
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </div>
    </div>
    <div class="middle" v-if="currentLevel != 6">
      <dividerTitle :title="'下级节点'"></dividerTitle>
      <div class="content">
        <base-table :tableSetting="baseTableSetting"></base-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  classStandardDetail,
  classStandardAddOrEdit,
  classStandardDelete,
  baseParamDetail,
  baseParamList,
} from "@/api/standardManagement/acountManagement.js";
import { getTreeRootData , saveData , nodeCodeSelect , deleteCurrentData , dataSourceData } from "@/api/businessConfigurationManagement/paramMonitoringConfig.js";
export default {
  props: {
    //当前点击树节点获取的数据
    currentNode: {
      type: Object,
      default: () => {
        return {};
      }
    },
    //判断当前组织的数据
    currentData:{
      type: Object,
      default: () => {
        return {};
      }
    },
    //整棵树的数据
    allTreeData:{
      type: Array,
      default: () => {
        return [];
      }
    },
    //当前是水厂还是水司
    currentOrg:{
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
  },
  created() {
  },
  data() {
    return {
      clickType:'btnClick',
      pageLevel:'2',
      currentLevel:1,
      pageName:'监测对象',
      buttonName:'新建厂站',
      pageType:'addStation',
      titleName: "",
      //节点信息-水司级页面
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "节点编码",
            prop: "code",
            type: "select",
            span: 8,
            selectOption: [],
            required: true,
            methods:(obj,editFormData)=>{
              if(obj.name){
                editFormData.name = obj.name
              }
            },
          },
          {
            label: "节点名称",
            prop: "name",
            type: "text",
            span: 8,
            maxlength: 20,
            required: true,
          },
          {
            label: "节点层级",
            prop: "level",
            type: "select",
            span: 8,
            isHide: false,
            required: true,
            disabled:true,
            selectOption:this.$store.getters['dirtData']('gdh_monitor_level'),
          },
        ],
      },
      editFormData:this.currentNode,
      //新建厂站
      addStation:[{
            label: "数据源",
            prop: "dataSource",
            type: "select",
            span: 8,
            isHide: false,
            required: true,
            disabled:true,
            selectOption: [
                
            ],
      }],
      //新建监测对象
      addMonitoring:[
          {
            label: "排序",
            prop: "sort",
            type: "number",
            span: 8,
          }
      ],
      //新建采集项
      equipmentBackObj:null,
      addCollection:[
          {
            label: "排序",
            prop: "sort",
            type: "number",
            span: 8,
          },
          {
            type: "device", //类型
            label: "关联台账",
            prop: "equipmentName", //多选时，字段要为数组类型
            idsStr: "equipment",
            trigger: "change",
            required: true,
            span: 8,
            placeholder: "请选择关联台账",
            methods: arr => {
              //this.equipmentBackObj = arr[0]
            },
          },
      ],
      lastPageData:[
          {
            label: "数据单位",
            prop: "unit",
            type: "text",
            span: 8,
          },{
            label: "高限",
            prop: "highLimit",
            type: "text",
            span: 8,
          },{
            label: "低限",
            prop: "lowLimit",
            type: "text",
            span: 8,
          },{
            label: "字段描述",
            prop: "remark",
            type: "textarea",
            span: 8,
          },
          {
            label: "数据精度",
            prop: "dataAccuracy",
            type: "el-number",
            min: 0,
            step: 1,
            stepStrictly: true,
            span: 8,
          },
      ],
      //下级节点table配置
      baseTableSetting: {
        indexShow: true,
        column: [
          {
            label: "节点名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "节点层级",
            textAlign: "center",
            prop: "level",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "gdh_monitor_level",
                row.level
              );
            },
          },
          {
            label: "节点编码(datasource)",
            textAlign: "center",
            prop: "code",
          },
        ],
        data: [],
        noBorderRight: true,
        autoHeight: true,
        rowIndex: 0,
      },
    };
  },
  computed: {

  },
  mounted(){
      this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addStation]
      this.getTableData()
      this.getDataSourceSelect()
  },
  methods: {
    //数据源下拉框数据
    getDataSourceSelect(){
      dataSourceData().then(res =>{
        if(res.code ==200){
          let datas = res.data
          datas.map(item =>{
            item.label = item.value,
            item.value = item.key
          })
          this.$set(this.formConfig.itemArr[3],'selectOption',datas)
        }
      },err =>{
        this.$message.error(err)
      })
    },
    //删除按钮
    deleteData(){
        let param = {
          id:this.currentNode.id
        }
        this.$confirm("确定删除该条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          deleteCurrentData(param)
          .then(res =>{
            if(res.code ==200){
              this.$message.success(res.description)
              this.$emit('refreshTree',res.data)
            }
          },err =>{
            this.$message.error(err)
          })
        })
        .catch(e => {});
    },
    //新建厂站按钮
    addPage(){
        this.$set(this.formConfig.itemArr[0],'disabled',false)
        this.$set(this.formConfig.itemArr[1],'disabled',false)
        this.clickType = 'btnClick'
        switch (this.pageType) {
          case "addStation":
              if(this.currentLevel !=1){
                this.$message.warning('当前层级节点必须为第1级')
                return
              }
              this.editFormData = {level:this.pageLevel,name:''}
              this.formConfig.itemArr = this.formConfig.itemArr.slice(0,3)
              this.pageType ='addMonitoring'
              this.buttonName = '新建监测对象'
              this.pageLevel = 2
              this.pageName = '新建厂站页面'
              this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addMonitoring]
               break; 
          case "addMonitoring":
            if(this.currentLevel !=2){
                this.$message.warning('当前层级节点必须为第2级')
                return
              }
              this.editFormData = {level:this.pageLevel,name:''}
              this.formConfig.itemArr = this.formConfig.itemArr.slice(0,3)
              this.pageType ='addCollection'
              this.buttonName = '新建采集项'
              this.pageLevel = 5
              this.pageName = '新建监测对象页面'
              this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addCollection]
              break; 
          case "addCollection":
            if(this.currentLevel !=5){
                this.$message.warning('当前层级节点必须为第5级')
                return
              }
              this.editFormData = {level:this.pageLevel,name:''}
              this.formConfig.itemArr = this.formConfig.itemArr.slice(0,3)
              this.pageType ='lastPage'
              this.pageLevel = 6
              this.pageName = '新建采集项页面'
              this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addMonitoring,...this.lastPageData]
              break; 
        }
        this.editFormData.level = this.pageLevel
        this.getNodeCodeSelect(this.clickType)
    },
    openPageType(val){
      this.clickType = 'treeClick'
      this.nodeLevel = val.level
      this.formConfig.itemArr = this.formConfig.itemArr.slice(0,3)
      switch(val.level){
        //水司
        case "1":
          this.pageType ='addStation'
          this.buttonName = '新建厂站'
          this.pageName = ''
          this.currentLevel = 1
          this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addStation]
          break;
          //水厂
        case "2":
          this.pageType ='addMonitoring'
          this.buttonName = '新建监测对象'
          this.pageName = '新建厂站页面'
          this.currentLevel = 2
          this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addMonitoring]
          break;
          //监测对象
        case "5":
          this.pageType ='addCollection'
          this.buttonName = '新建采集项'
          this.pageName = '新建监测对象页面'
          this.currentLevel = 5
          this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addCollection]
          break;
          //采集项
        case "6":
          this.pageType ='lastPage'
          this.pageName = '新建采集项页面'
          this.currentLevel = 6
          this.formConfig.itemArr = [...this.formConfig.itemArr,...this.addMonitoring,...this.lastPageData]
          break; 
      }
      this.getNodeCodeSelect(this.clickType)
    },
    //保存按钮
    async save() {
      let data = await this.$refs.editForm.getFormData();
      const params = Object.assign({}, data);
        params.appId = this.currentOrg.appCode
       /*  if(this.equipmentBackObj != null){
          params.equipment = this.equipmentBackObj.id
        } */
        params.parentId = this.clickType =='btnClick'?this.currentNode.id:this.currentNode.parentId
        saveData(params)
        .then(res => {
            if (res.code === 200) {
                this.$message.success(res.description);
                this.$emit('refreshTree',res.data)
            }},
            err => {
                this.$message.error(err);
            }
        );
    },
    //获取节点编码下拉框数据
    getNodeCodeSelect(val){
      let  param = {
           level:val =='btnClick'?this.pageLevel:this.currentLevel,
           mark:this.currentData?this.currentData.datasource:'yggs',
           //mark:'yggs',
           id:val =='btnClick'?this.currentNode&&this.currentNode.id:this.currentNode&&this.currentNode.parentId
        }
        nodeCodeSelect(param)
        .then(res =>{
            if(res.code ==200){
                let datas = res.data
                let selectDataArr = []
                datas.map((item,index) =>{
                    let selectData = {}
                    selectData.label = item.key+(item.value?'('+item.value+')':''),
                    selectData.value = item.key,
                    selectData.name = item.value,
                    selectDataArr.push(selectData)
                })
                this.$set(this.formConfig.itemArr[0],'selectOption',selectDataArr)
            }
        },err =>{
            this.$message.error(err)
        })
    },
    //表格数据
    getTableData(val){
      if(val &&val.children){
        let arr = val.children
        let objArr = []
        arr.map(item =>{
          let obj = {}
          obj.name = item.name,
          obj.level = item.level,
          obj.code = item.code
          objArr.push(obj)
        })
        this.baseTableSetting.data = objArr
      }else{
        this.baseTableSetting.data = []
      }
    },
  },
  watch: {
    currentLevel:{
      handler(val) {
      },
    },
    currentNode: {
      handler(val) {
        if(val.level ==1){
          this.$set(this.formConfig.itemArr[0],'disabled',true)
          this.$set(this.formConfig.itemArr[1],'disabled',true)
        }else{
          this.$set(this.formConfig.itemArr[0],'disabled',false)
          this.$set(this.formConfig.itemArr[1],'disabled',false)
        }
        this.editFormData = val
        this.equipmentBackObj = null
        this.editFormData.dataSource = this.currentData?this.currentData.datasource:''
        this.openPageType(val)
        this.getTableData(val)
      },
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .top {
    height: 50px;
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 16px;
      font-weight: bold;
      padding: 0 10px;
      letter-spacing: 4px;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding: 0 10px;
    }
    .button {
      height: 40px;
      line-height: 40px;
    }
  }
  .first {
    height: 220px;
    .edit-form {
      margin: 10px 0;
    }
  }
  .middle {
    flex: 3;
    .content {
      margin: 20px 0;
      text-align: left;
      font-size: 14px;
      .select {
        margin: 10px 0 20px 26px;
        .item-label::before {
          content: "*";
          color: red;
          margin-right: 4px;
        }
        .input {
          width: calc(100% - 102px);
          margin-left: 20px;
        }
      }
      .param {
        margin: 10px 10px;
        display: flex;
        .desc {
          text-align: right;
          width: 100px;
          height: 40px;
          line-height: 40px;
        }
        .item {
          margin: 5px 10px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
          background-color: #f2f2f2;
          border-radius: 10px;
        }
        .base-item {
          background-color: #d9f2fd;
        }
        .list {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
  .buttom {
    flex: 4;
    .add {
      text-align: right;
      margin: 10px 0;
    }
  }
}
.title {
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  padding: 0 10px;
  letter-spacing: 4px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  background-color: #e8f1f8;
}
</style>
